<template>
  <a-card :bordered='false'>
    <!-- 查询区域 -->
    <div class='table-page-search-wrapper'>
      <a-form layout='inline' @keyup.enter.native='searchQuery'>
        <a-row :gutter='24'>
          <a-col :xl='6' :lg='7' :md='8' :sm='24'>
            <a-form-item label='日期'>
              <a-month-picker style='width: 100%' placeholder='请选择月份' @change='monthChange' v-model='queryParam.time' />
            </a-form-item>
          </a-col>
          <a-col :xl='6' :lg='7' :md='8' :sm='24'>
            <a-form-item label='姓名'>
              <a-input placeholder='请输入姓名' v-model='queryParam.name' />
            </a-form-item>
          </a-col>
          <a-col :xl='6' :lg='7' :md='8' :sm='24'>
            <span style='float: left;overflow: hidden;' class='table-page-search-submitButtons'>
              <a-button type='primary' @click='searchQuery' icon='search'>查询</a-button>
              <a-button type='primary' @click='searchReset' icon='reload' style='margin-left: 8px'>重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <div>
      <a-table
        ref='table'
        size='middle'
        :scroll='{x:true}'
        bordered
        rowKey='id'
        :columns='columns'
        :dataSource='dataSource'
        :pagination='ipagination'
        :loading='loading'
        class='j-table-force-nowrap'
        @change='handleTableChange'>
        <template slot='countMonthNum' slot-scope='text, record'>
           <span v-if='record.name !=="合计"'>
             <a @click='handleDetail(record)'>{{ text }}</a>
          </span>
          <span v-else>{{ text }}</span>

        </template>
        <template slot='htmlSlot' slot-scope='text'>
          <div v-html='text'></div>
        </template>
        <template slot='imgSlot' slot-scope='text'>
          <span v-if='!text' style='font-size: 12px;font-style: italic;'>无图片</span>
          <img v-else :src='getImgView(text)' height='25px' alt=''
               style='max-width:80px;font-size: 12px;font-style: italic;' />
        </template>
        <template slot='fileSlot' slot-scope='text'>
          <span v-if='!text' style='font-size: 12px;font-style: italic;'>无文件</span>
          <a-button
            v-else
            :ghost='true'
            type='primary'
            icon='download'
            size='small'
            @click='downloadFile(text)'>
            下载
          </a-button>
        </template>
      </a-table>
    </div>
    <bus-business-opportunity-list-model ref='busBusinessOpportunityListModel'></bus-business-opportunity-list-model>
  </a-card>
</template>


<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { sorter } from '@/utils/sorter'
import { getAction } from '@api/manage'
import { splitByNum, toFixedTwo } from '@/utils/util'
import moment from 'moment'
import TableTitleTooltip from '@views/hifar/operate/TableTitleTooltip'
import BusBusinessOpportunityListModel from '@views/hifar/business/modules/BusBusinessOpportunityListModel'


export default {
  name: 'HfPsPersonalCheckList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    TableTitleTooltip, BusBusinessOpportunityListModel
  },
  data() {
    return {
      description: '商机统计页面',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '姓名',
          align: 'center',
          sorter: true,
          dataIndex: 'name'
        },
        {
          title: '月份',
          align: 'center',
          dataIndex: 'time'
        },
        {
          title: <TableTitleTooltip title={'本年度新增的商机数（商机阶段0-85%，2022年数据包含2021年）'} tableTitle={'年度新增商机数'} />,
          align: 'center',
          dataIndex: 'countYearNum'
        },
        {
          title: <TableTitleTooltip title={'当月新增的商机数（商机阶段0-60%）'} tableTitle={'当月累计商机数'} />,
          align: 'center',
          dataIndex: 'countMonthNum',
          scopedSlots: { customRender: 'countMonthNum' }
        },
        {
          title: <TableTitleTooltip title={'年度累计虚拟成交额（商机阶段0-60%，2022年数据包含2021年）'} tableTitle={'年度累计虚拟成交额'} />,
          align: 'center',
          dataIndex: 'yearFictitiousQuota',
          customRender: (t, item, index) => {
            return splitByNum(+t)
          }
        },
        {
          title: <TableTitleTooltip title={'月度新增虚拟成交额（商机阶段0-60%）'} tableTitle={'月度新增虚拟成交额'} />,
          align: 'center',
          dataIndex: 'monthFictitiousQuota',
          customRender: (t, item, index) => {
            return splitByNum(+t)
          }

        },
        {
          title: <TableTitleTooltip title={'合同管理-根据合同签订日期统计年度预计毛利值总和'} tableTitle={'年度累计新增毛利'} />,
          align: 'center',
          dataIndex: 'yearGrossProfit',
          customRender: (t, item, index) => {
            return splitByNum(+t)
          }
        },
        {
          title: <TableTitleTooltip title={'合同管理-根据合同签订日期统计月度预计毛利值总和'} tableTitle={'月度新增签单毛利'} />,
          align: 'center',
          dataIndex: 'monthGrossProfit',
          customRender: (t, item, index) => {
            return splitByNum(+t)
          }
        }
      ],
      url: {
        statistics: '/bussiness/busBusinessOpportunity/statistics'
      },
      dictOptions: {},
      queryParam: {
        selectedMonth: ''
      }
    }
  },
  created() {
    // this.getSuperFieldList()
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    handleDetail: function(record) {
      this.$nextTick(() => {
        this.$refs.busBusinessOpportunityListModel.queryOpportunity(record)
        this.$refs.busBusinessOpportunityListModel.title = '商机详情'
      })
    },
    monthChange(date) {
      let selectedMonth = date ? moment(date).format('YYYY-MM') : ''
      this.queryParam.time = selectedMonth
    },
    initDictConfig() {
    },
    loadData() {
      var params = this.getQueryParams()//查询条件
      this.loading = true
      getAction(this.url.statistics, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
        } else {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>